<template>
	<view>
		<view class="" style="background-color: transparent;">
			<view class="cu-form-group">
				<view class="grid col-3 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in fileList" :key="index" @tap="yulanClick(item,index)">
						<image :src="item.url" mode="aspectFill"></image>
						<view class="cu-tag bg-red text-xs" v-if="isTijiao == false"  @tap.stop="delClick(item,index)">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="addClick" v-if="fileList.length<maxCount">
						<text class='cuIcon-cameraadd'></text>
						<text class="choose-img">请选择照片</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "yw-upfile-list",
		props: {
			rootPath: {
				type: String,
				required: true,
				default: "",
			},
			value: {
				type: [Array, String],
				default: []
			},
			maxCount: {
				type: Number,
				default: 99
			},
			valueType: {
				type: String,
				default: "string"
			},
			isTijiao:{
				type: Boolean,
			}
		},
		data() {
			return {
				fileList: []
			};
		},
		watch: {
			value(newVal, oldVal) {
				console.log(newVal, oldVal)
				this.setFileList(newVal)
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.setFileList(this.value)
			})
		},
		methods: {
			yulanClick(item, index) {
				uni.previewImage({
					urls: this.getImgs(),
					current: index
				});
			},
			setFileList(value) {
				this.fileList = []

				if (typeof(value) == 'string') {
					console.info("setFileList", value)
					if (uni.$common.isNotBlank(value)) {
						if (uni.$common.isHaveCharFromStr(value, ",")) {
							value.split(",").forEach(item => {
								this.fileList.push({
									url: item
								})
							})
						} else {
							this.fileList.push({
								url: value
							})
						}
					}
				} else if (typeof(value) == 'array') {
					value.forEach(item => {
						this.fileList.push({
							url: item
						})
					})
				}
			},
			getImgs() {
				return this.fileList.map(item => item.url)
			},
			addClick() {
				uni.chooseImage({
					count: this.maxCount - this.fileList.length,
					success: (res) => {
				
						this.upFile(res.tempFilePaths, 0)
					}
				})
			},
			upFile(files, index) {
				if (index < files.length) {
					uni.$common.toastLoading("已上传" + (index + 1) + "张", 1000)
					uni.$api.upFile({
						file: files[index],
						rootPath: this.rootPath.toLowerCase(),
						isToast: false
					}).then(data => {
						this.fileList.unshift(data);
						this.change()
						uni.$common.toastLoading("已上传" + (index + 1) + "张", 1000)
						if ((index + 1) >= files.length) {
							this.upFile(files, (index + 1))
						} else {
							setTimeout(() => {
								this.upFile(files, (index + 1))
							}, 500)
						}
					})
				} 
			},
			delClick(item, index) {
				this.fileList.splice(index, 1)
				this.change()
			},
			change() {
				let imgList = this.getImgs()
				console.info("change", this.valueType)
				if (this.valueType == 'string') {
					this.$emit("input", imgList.join(","))
				} else {
					this.$emit("input", imgList)
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.cu-form-group {
		background-color: transparent;
		padding: 0upx 0upx;
		display: flex;
		align-items: center;
		min-height: 100upx;
		justify-content: space-between;
		
	}
	.solids{
		text-align: center;
	}
	.choose-img{
		position: relative;
		top: 160rpx;
		color: #000;
		font-size: 0.9rem;
	}
</style>
